<template>
  <t-dialog
    v-model:visible="visible"
    :header="dialogTitle"
    width="800"
    :confirm-btn="{ loading }"
    @confirm="dialogConfirm"
    @close="dialogHide"
  >
    <ai-editor v-model="formData.content"></ai-editor>
  </t-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';

import AiEditor from '@/components/aieditor/index.vue';
import { t } from '@/locales';

const loading = ref(false);
const emits = defineEmits(['confirm']);

const dialogTitle = ref('');
const type = ref('add');
const visible = ref(false);
const formData = ref({ id: 0, content: '' });

const dialogShow = (action: string, row?: any) => {
  visible.value = true;
  type.value = action;
  if (action === 'edit') {
    formData.value.id = row.patchText.id;
    formData.value.content = row.patchText.content;

    dialogTitle.value = `${t('common.edit')}【${row.title}】`;
  } else {
    dialogTitle.value = t('common.add');
  }
};
const dialogHide = () => {
  loading.value = false;
  visible.value = false;
};
const dialogConfirm = () => {
  loading.value = true;
  emits('confirm', formData.value);
};

defineExpose({
  dialogShow,
  dialogHide,
});
</script>
